<template>
  <div class = "">
    <!--  //头部-->
    <el-form
        :inline="true"
        :model="selectByForm"
        class="advanced-form"
        label-position="right"
    >
      <el-row :gutter="20" class="form-row">
        <!-- 第一行 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="姓名" class="form-item">
            <el-input
                v-model="selectByForm.realName"
                placeholder="请输入真实姓名"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="角色" class="form-item">
            <el-select
                v-model="selectByForm.role"
                placeholder="请选择角色"
                clearable
                style="width: 100%"
            >
              <el-option label="农户" value="farmer" />
              <el-option label="投资者" value="investor" />
              <el-option label="审计" value="auditor" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="规则" class="form-item">
            <el-input
                v-model="selectByForm.ruleName"
                placeholder="请输入分配规则"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            >
            </el-input>
          </el-form-item>
        </el-col>


      </el-row>
      <el-row :gutter="20" class="form-row" type="flex" align="middle">
        <!-- 第一列：开始日期选择器 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="开始日期" class="form-item inline-form-item">
            <el-date-picker
                v-model="selectByForm.startDate"
                type="date"
                placeholder="开始日期"
                style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <!-- 第二列：结束日期选择器 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="结束日期" class="form-item inline-form-item">
            <el-date-picker
                v-model="selectByForm.endDate"
                type="date"
                placeholder="结束日期"
                style="width: 100%"
            />
          </el-form-item>
        </el-col>

        <!-- 第三列：查询按钮 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-button
              type="primary"
              @click="onSelect"
              icon="el-icon-search"
              style="margin-left: 10px"
          >
            查询
          </el-button>
        </el-col>
      </el-row>

    </el-form>

    <!--  列表页  -->
    <el-table :data="tableData"
              style="width: 100%"
              :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
              stripe
              highlight-current-row
              @current-change="toShow"
              border
    >
      <el-table-column prop="realName" label="姓名" width="180" align="center"  ></el-table-column>
      <el-table-column prop="role" label="角色" width="180" align="center"  >
        <template slot-scope="scope">
          {{roleMap[scope.row.role]}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180" align="center" >
        <template slot-scope="scope">
          {{statusMap[scope.row.status]}}
        </template>
      </el-table-column>
      <el-table-column prop="reserveFund" label="个人金额" width="180" align="center" ></el-table-column>
      <el-table-column prop="ruleName" label="分配规则名称" width="180" align="center" ></el-table-column>
      <el-table-column prop="distributionDate" label="分配时间" width="180" align="center" >
        <template slot-scope="scope">
          {{ scope.row.distributionDate ? scope.row.distributionDate.split('T')[0] : '-' }}
        </template>
      </el-table-column>
    </el-table>

    <!--    页脚-->
    <el-pagination
        background
        :page-size="pageSize"
        :current-page="pageNum"
        :page-count="pages"
        layout="prev, pager, next"
        :total="total"
        @current-change="changePageNum"
    >
    </el-pagination>

  </div>
</template>

<script>




import {getDistributionPage} from "@/api/distribution";

export default {
  data() {
    return{
      //筛选表单
      selectByForm:{
        realName:'',
        role:'',
        ruleName:'',
        startDate:'',
        endDate:''
      },
      //状态映射
      statusMap: {
        pending:'待处理',
        calculated:'已计算',
        approved:'已审批',
        completed:'已完成',
        failed:'失败'
      },
      // 角色映射
      roleMap: {
        admin: '管理员',
        farmer: '农户',
        investor: '投资者',
        auditor: '审计员'
      },
      //列表数据
      tableData:'',
      //页脚
      pages: 0,
      total: 1,
      pageNum: 1,
      pageSize:6,
      value:''

    };
  },
  methods: {

    onSelect(){
      this.pageNum = 1
      this.getPage()
    },

    //获取页面数据
    getPage(){
      getDistributionPage(this.selectByForm,this.pageNum,this.pageSize).then((res) =>{
        if(res.code == 200){
          this.tableData = res.data.list
          this.pages = res.data.pages
          this.total = res.data.total
          this.pageNum = res.data.pageNum
          this.pageSize = res.data.pageSize
        }
      })
    },
    //直接选择第几页
    changePageNum(v){
      console.log(v+'')
      this.pageNum = v
      this.getPage()
    }
  },
  created(){
    this.getPage()
  }
}
</script>

<style scoped>

/* 表单行样式 */
/* 确保表单项在一行显示 */
.form-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 20px;
}

/* 列间距调整 */
.form-col {
  padding-right: 10px;
  display: flex;
  align-items: center;
}
/* 表单项内部label和内容同行显示 */
.inline-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.inline-form-item ::v-deep .el-form-item__label {
  white-space: nowrap;
  padding-right: 10px;
}

.inline-form-item ::v-deep .el-form-item__content {
  flex: 1;
  min-width: 0;
}

/* 表单项样式 */
.form-item {
  margin-bottom: 0;
}

/* 输入框样式 */
.form-input {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .form-col {
    padding: 0 5px;
  }
}
</style>

